<template>
    <div style="background-color: #f4f4f4">

        <div style="margin-top: 100px">
            <section class="project-detail__container main-container stage-flex-container">
                <section class="project-detail__sidebar">
                    <div class="project-detail__owner-sidebar">
                        <section class="project-detail__owner-base-info">
                            <button style="background: rgb(255, 255, 255);border:#ffffff"
                                @click="gotoUser(demands.user.userId)">
                            <div class="avatar-wrapper is-round"
                                 style="flex: 0 0 80px; width: 80px; height: 80px; margin-right: 0px; padding-bottom: 0px;">
                                <section class="avatar-wrapper__img-wrapper"
                                         style="width: 80px; height: 80px; background: rgb(255, 255, 255);">
                                    <img :src="imgUrl+demands.user.userImg"
                                         class="avatar-wrapper__avatar border"
                                         style="width: 80px; height: 80px; border-color: rgb(236, 236, 236);"></section>
                            </div>
                        </button>
                            <h3 class="project-detail__owner-name">
                                <span class="project-detail__owner-name-text">{{demands.username}}</span>
                            </h3>
                        </section>
                        <section class="project-detail__owner-detail-info">
                            <section class="project-detail__owner-rate-wrapper">
                                <span class="project-detail__owner-rate-label show-in-small">信誉</span>
                                <div role="slider" aria-valuenow="5" aria-valuetext=""
                                     aria-valuemin="0" aria-valuemax="5" tabindex="0"
                                     class="el-rate project-detail__owner-rate">
                                    <span class="el-rate__item"
                                          style="cursor: auto;">
                                        <i class="el-rate__icon el-icon-star-on" style="color: rgb(247, 186, 42);"></i>
                                    </span>
                                </div>
                                <p class="project-detail__owner-comments">
                                    共 73 条评价
                                </p></section>
                            <section class="project-detail__employer-credit">
                                <div class="el-tooltip credit__phase-wrapper"
                                     aria-describedby="el-tooltip-6790" tabindex="0">
                                    <div class="credit__wrapper" style="font-size: 14px;">
                                        <span>需求完成率</span>
                                        <span class="credit__phase-count">73 / 73</span>
                                    </div>
                                    <div class="credit__phase-state is-l5">
                                        极高
                                    </div>
                                </div>
                                <div class="el-tooltip credit__phase-wrapper"
                                     aria-describedby="el-tooltip-3713" tabindex="0">
                                    <div class="credit__wrapper" style="font-size: 14px;">
                                        <span>企划选定率</span>
                                        <span class="credit__phase-count">49 / 49</span>
                                    </div>
                                    <div class="credit__phase-state is-l5">
                                        极高
                                    </div>
                                </div>
                            </section>
                        </section>
                    </div> <!---->
                    <div class="project-detail__base-wrapper"
                         style="flex: 1 1 0%;">
                        <div class="pin-wrapper" style="height: auto;">
                            <section class="project-detail__base-info-sidebar"
                                     style="width: 240px;">
                                <div class="project-detail__base-info">
                                    <h5 class="project-detail__info-title">
                                        截稿日期</h5>
                                    <p class="project-detail__info-content">
                                        {{$moment(demands.closingDate).format('YYYY-MM-DD')}}</p>
                                    <h5 class="project-detail__info-title">稿酬预算</h5>
                                    <p class="project-detail__info-content">
                                        ￥ {{demands.priceLow}} ~ {{demands.priceHigh}}
                                    </p>
                                    <h5 v-if="demands.status == 2" class="project-detail__info-title">
                                        需求已被承接
                                    </h5>
                                    <h5 v-else-if="demands.status == 3" class="project-detail__info-title">
                                        需求已被满足
                                    </h5>
                                    <h5 v-else-if="demands.status == 4" class="project-detail__info-title">
                                        需求已被关闭
                                    </h5>
                                    <h5 v-else class="project-detail__info-title">
                                        {{days}} 天 {{hours}} 小时
                                        {{minutes}} 分后关闭应征
                                    </h5>
                                    <el-button @click="recruit" :disabled="demands.status != 1 ? true : false"
                                               type="primary" class="stage-button is-block">
                                        <i class="el-icon-s-flag"></i>
                                        <span>应征企划</span>
                                    </el-button>
                                    <el-dialog
                                            title="价格确定"
                                            :visible.sync="dialogVisible"
                                            width="30%"
                                            :before-close="handleClose"
                                            :close-on-click-modal="false">
                                        请输入定金
                                        <el-input v-model="deposit" style="margin-top: 10px"></el-input>
                                        <br/><br/>
                                        请输入尾款
                                        <el-input v-model="balancePayment" style="margin-top: 10px"></el-input>
                                        <span slot="footer" class="dialog-footer">
                                            <el-button @click="dialogVisible = false">取 消</el-button>
                                            <el-button type="primary" @click="submitPrice">确 定</el-button>
                                        </span>
                                    </el-dialog>

                                </div>
                                <div class="project-detail__action-list">
                                    <button type="button"
                                            class="stage-button stage-button--text stage-button--small is-flex">
                                        <a href="/demands">
                                            <i class="el-icon-arrow-left"></i>
                                            <span>返回列表</span>
                                        </a>
                                    </button>
                                </div>
                            </section>
                        </div>
                    </div>
                </section>

                <section class="project-detail__main">
                    <section class="project-detail__main-panel"
                    ><h1 class="project-detail__project-title">
                        {{demands.demands}}
                    </h1>
                        <article class="project-detail__detail-info">
                            <div class="project-detail__info-navbar">
                                <span class="project-detail__created-at">
        需求发布于
        {{$moment(demands.createdTime).format('YYYY-MM-DD HH:mm:ss')}}
      </span>
                                <span class="project-detail__category">
        {{demands.categoryName}}
      </span>
                            </div>

                            <div class="project-detail__flow-tips-wrapper">
                                <h4 class="project-detail__section-title">
                                    应征流程
                                </h4>
                                <img class="flowImg" src="../../assets/img/流程.png">
                            </div>
                            <section class="project-detail__info-section" style="margin-top: 40px;">
                                <h4 class="project-detail__section-title">
                                    需求详情
                                </h4>
                                <div class="project-detail__summary">{{demands.requirements}}
                                </div>
                            </section>
                            <section class="project-detail__info-section">
                                <h4 class="project-detail__section-title">
                                    作品要求
                                </h4>
                                <div class="project-detail__demand-list">
                                    <div class="project-detail__demand"><span
                                            class="project-detail__demand-label">风格：</span>
                                        <span class="project-detail__demad-content">{{demands.style}}</span>
                                    </div>
                                    <div class="project-detail__demand"><span
                                            class="project-detail__demand-label">颜色模式：</span>
                                        <span class="project-detail__demad-content">{{demands.color}}</span>
                                    </div>
                                    <div class="project-detail__demand"><span
                                            class="project-detail__demand-label">规格：</span>
                                        <span class="project-detail__demad-content">{{demands.specifications}}</span>
                                    </div>
                                    <div class="project-detail__demand"><span
                                            class="project-detail__demand-label">作品格式：</span>
                                        <span class="project-detail__demad-content">{{demands.format}}</span>
                                    </div>
                                    <div class="project-detail__demand">
                                        <span class="project-detail__demand-label">反馈间隔：</span>
                                        <span class="project-detail__demad-content">{{demands.feedbackInterval}}</span>
                                    </div>
                                </div>
                            </section>
                        </article>

                    </section>
                </section>
            </section>
        </div>

    </div>
</template>

<script setup>
  import {selectDemandById} from "@/assets/api/demandsApi";
  import {selectAuthorById} from "@/assets/api/authorApi";
  import {ElMessage, ElMessageBox} from "element-plus";
  import {useRoute, useRouter} from "vue-router";
  import {getCurrentInstance, onBeforeMount, ref} from "vue";

  const imgUrl = getCurrentInstance()?.appContext.config.globalProperties.$imgUrl
  const router = useRouter();
  const route = useRoute();
  const demands = ref({user: {userImg: ''}});
  const days = ref(0);
  const hours = ref(0);
  const minutes = ref(0);
  const seconds = ref(0);
  const deposit = ref(0);
  const balancePayment = ref(0);
  const dialogVisible = ref(false);

  const handleClose = (done) => {
    ElMessageBox.confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
  };
  const selectDemandDetail = () => {
    let data = {};
    data.demandId = route.query.id;
    selectDemandById(data).then((res) => {
      demands.value = res.data;
      let nowDate = new Date();
      let untilDate = new Date(demands.closingDate.value);
      let daysDiff = (untilDate.value - nowDate.value) / 1000 / 3600 / 24;
      days.value = Math.floor(daysDiff.value);
      let hoursDiff = (daysDiff.value - days.value) * 24;
      hours.value = Math.floor(hoursDiff.value);
      let minutesDiff = (hoursDiff.value - hours.value) * 60;
      minutes.value = Math.floor(minutesDiff.value);
    })
  };
  const recruit = () => {
    let data = {};
    data.userId = localStorage.userId;
    selectAuthorById(data).then(res => {
      if (res.data == null) {
        ElMessage.error("您还未成为制作者，无法应征需求！");
      } else {
        dialogVisible.value = true;
      }
    });

  };
  const submitPrice = () => {
    dialogVisible.value = false;
    localStorage.setItem('deposit', deposit.value);
    localStorage.setItem('balancePayment', balancePayment.value);
    router.push({path: '/confirmOrder', query: {id: route.query.id}});
  };
  const gotoUser = (userId) => {
    router.push({path: '/demandUserPage', query: {id: userId}});
  };

  onBeforeMount(() => {
    selectDemandDetail();
  });
</script>

<style scoped>
    .stage-flex-container {
        display: flex;
    }

    .main-container {
        width: 1200px;
        margin: 60px auto 100px auto;
        flex: 1;
    }

    .project-detail__sidebar {
        display: flex;
        flex: 0 0 240px;
        max-width: 240px;
        margin-right: 24px;
        flex-direction: column;
        align-self: stretch;
    }

    .project-detail__owner-sidebar {
        padding: 30px;
        align-items: stretch;
        margin-bottom: 10px;
        flex-direction: column;
        display: flex;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
        border-radius: 4px;
        background: #fff;
    }

    .project-detail__owner-base-info, .project-detail__owner-detail-info, .project-detail__owner-rate-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    a {
        color: #adb3fb;
        transition: .5s;
        cursor: pointer;
        text-decoration: none;
    }

    .avatar-wrapper {
        position: relative;
        overflow: hidden;
        margin-right: 10px;
        transition: .5s;
        box-sizing: content-box;
    }

    .avatar-wrapper.is-round .avatar-wrapper__img-wrapper, .avatar-wrapper.is-round img {
        border-radius: 100%;
    }

    .avatar-wrapper__img-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .avatar-wrapper__avatar.border {
        border: 1px solid transparent;
    }

    .avatar-wrapper__avatar {
        width: 100%;
        opacity: 1;
    }

    .border {
        border-width: 1px;
    }

    .project-detail__owner-name {
        display: flex;
        align-items: center;
        margin: 15px 0 0;
        color: #707070;
    }

    h3 {
        font-size: 18px;
    }

    .project-detail__owner-name-text {
        margin-right: 5px;
    }

    .project-detail__owner-base-info, .project-detail__owner-detail-info, .project-detail__owner-rate-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    .project-detail__owner-rate {
        margin-top: 20px;
    }

    .el-rate {
        height: 20px;
        line-height: 1;
    }

    .el-rate__icon, .el-rate__item {
        position: relative;
        display: inline-block;
    }

    .project-detail__owner-comments {
        color: #9b9b9b;
        font-size: 12px;
        margin: 5px 0 20px;
    }

    .project-detail__employer-credit {
        align-self: stretch;
    }

    .credit__phase-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #707070;
    }

    .credit__progress-wrapper, .credit__wrapper {
        display: flex;
        align-items: center;
    }

    .project-detail__employer-credit .credit__wrapper {
        margin: 5px 0;
    }

    .credit__phase-count {
        display: inline-block;
        color: #9b9b9b;
        margin-left: 5px;
        font-size: 12px;
    }

    .credit__phase-state.is-l5 {
        border-color: #5cb85c;
        color: #5cb85c;
    }

    .credit__phase-state {
        border: 1px solid silver;
        color: silver;
        font-size: 12px;
        width: 40px;
        line-height: 16px;
        border-radius: 10px;
        text-align: center;
    }

    .project-detail__base-info-sidebar {
        flex-direction: column;
        display: flex;
        flex: 1;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
        border-radius: 4px;
        background: #fff;
    }

    .project-detail__base-info {
        padding: 30px 30px 20px 30px;
    }

    .project-detail__info-title {
        font-weight: 400;
        font-size: 12px;
        color: #9b9b9b;
        margin: 0 0 5px;
    }

    .project-detail__info-content {
        color: #00a8e9;
        font-weight: 700;
        font-size: 20px;
        margin: 0 0 20px;
    }

    .stage-button.is-block {
        display: block;
        width: 100%;
        color: #fff;
        background-color: #00a8e9;
        border-color: #00a8e9;
        padding: 16px 38px;
        font-size: 18px;
        border-radius: 4px;
    }

    .stage-button {
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        border: 1px solid #dcdfe6;
        appearance: none;
        text-align: center;
        outline: none;
        margin: 0;
        transition: .1s;
        user-select: none;
    }

    .project-detail__action-list button {
        color: #9b9b9b;
    }

    .stage-button--text {
        border-color: transparent;
        color: #00a8e9;
        background: transparent;
        padding-left: 0;
        padding-right: 0;
    }

    .stage-button--small {
        padding: 7px 18px;
        font-size: 12px;
        border-radius: 4px;
    }

    .project-detail__main {
        flex: 1;
        width: 0;
        flex-direction: column;
    }

    .project-detail__main-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 30px 40px;
        margin-bottom: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
        border-radius: 4px;
        background: #fff;
    }

    .project-detail__project-title {
        margin: 0 0 15px;
        font-size: 30px;
        color: #27282e;
    }

    .project-detail__detail-info {
        margin-bottom: 30px;
    }

    .project-detail__info-navbar {
        font-size: 12px;
        color: #9b9b9b;
        display: flex;
        flex-direction: row;
        margin-bottom: 30px;
    }

    .project-detail__category {
        margin-left: 50px;
    }

    .project-detail__flow-tips-wrapper {
        margin-bottom: 30px;
        position: relative;
        width: 100%;
    }

    .flowImg {
        width: 100%;
    }

    .project-detail__info-section {
        margin-top: 60px;
    }

    .project-detail__section-title {
        color: #00a8e9;
        margin: 0 0 30px;
    }

    .project-detail__summary {
        white-space: pre-line;
        line-height: 24px;
        work-break: break-all;
    }

    .project-detail__demand-list {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .project-detail__demand:first-child {
        margin-top: 0;
    }

    .project-detail__demand {
        display: flex;
        flex: 0 0 50%;
        align-items: flex-start;
        max-width: 50%;
        font-size: 14px;
        line-height: 1;
        margin-top: 50px;
    }

    .project-detail__demand-label {
        flex: 0 0 80px;
        color: #00a8e9;
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
    }

    .project-detail__demad-content {
        flex: 1;
        color: #707070;
        white-space: pre-wrap;
        word-break: break-all;
        padding-right: 5px;
    }
</style>
